{% extends "base.html" %}

{% block title %}首页{% endblock %}

{% block content %}
<!-- 主要内容 -->
<main class="container mt-4">
    <!-- 欢迎区域 -->
    <div class="p-5 mb-4 bg-light rounded-3">
        <div class="container-fluid py-5">
            <h1 class="display-5 fw-bold">新疆优质拉面籽粒硬度及其Pins基因的分子标记改良技术体系平台</h1>
            <p class="col-md-8 fs-4">
                专业的籽粒硬度及Pins基因分子标记改良技术体系平台，助力新疆优质拉面研究与改良。
            </p>
            <a href="{{ url_for('auth.login') }}" class="btn btn-primary btn-lg">开始使用</a>
        </div>
    </div>

    <!-- 功能卡片 -->
    <div class="row row-cols-1 row-cols-md-3 g-4 mb-4">
        <div class="col">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="card-title">数据采集</h5>
                    <p class="card-text">支持实验数据的录入与管理，包括籽粒硬度测定数据、Pins基因序列数据等。</p>
                    <a href="{{ url_for('data.index') }}" class="btn btn-outline-primary">进入</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="card-title">分子标记分析</h5>
                    <p class="card-text">基于分子标记技术，进行Pins基因检测和籽粒硬度分析。</p>
                    <a href="{{ url_for('analysis.index') }}" class="btn btn-outline-primary">进入</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="card-title">报告生成</h5>
                    <p class="card-text">生成实验数据分析报告和改良技术推荐报告。</p>
                    <a href="{{ url_for('reports.index') }}" class="btn btn-outline-primary">进入</a>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- 页脚 -->
<footer class="footer mt-auto py-3 bg-light">
    <div class="container text-center">
        <span class="text-muted"> 新疆优质拉面籽粒硬度及其Pins基因的分子标记改良技术体系平台</span>
    </div>
</footer>
{% endblock %}

{% block scripts %}
<script>
document.getElementById('darkModeToggle').addEventListener('click', function() {
    document.body.classList.toggle('dark-mode');
    const isDarkMode = document.body.classList.contains('dark-mode');
    localStorage.setItem('darkMode', isDarkMode);
});

if (localStorage.getItem('darkMode') === 'true') {
    document.body.classList.add('dark-mode');
}
</script>
{% endblock %}